<template>
	<div class="ScreenViewTree" style="padding: 0px 20px">
		<div v-for="(tree,index) in treeData" :key="index">
			<a-collapse default-active-key="1" :bordered="false">
				<template #expandIcon="props">
                    <CaretRightOutlined  :rotate="props.isActive ? 90 : 0"/>
				</template>
				<a-collapse-panel key="1" :header="$i18(tree.name,'国际化名称')">
					<div class="instrument-list" v-for="(item,idx) in tree.list" :key="idx">
						<a-checkbox style="margin-right: 5px" :key="idx" @change="onChange($event,item)"></a-checkbox>
						<rx-icon-show icon="icon-colords-tubiao"></rx-icon-show>
						<div class="instrument-list-name">{{ $i18(item.name,'国际化名称') }}</div>
					</div>
					<div v-if="tree.children && tree.children.length>0" style="margin-left: 15px">
						<screen-view-tree :treeData="tree.children" :select-keys="checkedKeys"></screen-view-tree>
					</div>
				</a-collapse-panel>
			</a-collapse>
		</div>
	</div>
</template>

<script>

export default {
	name: "ScreenViewTree",
	props: {
		treeData: {
			type: Array,
			default:()=>[],
		},
		selectKeys: {
			type: Array,
			default:()=>[],
		},
	},
	data() {
		return {
			checkedKeys:this.selectKeys,
		}
	},
	methods: {
		i18n(name,text,key){
			return this.$ti18(name,text,"SysTree",key);
		},
		onChange(e,item){
			this.setCheckedKeys(item.pkId,e.target.checked);
		},
		setCheckedKeys(pkId,checked){
			//选中
			if(checked){
				let checkedKey= this.checkedKeys.find(item=>item==pkId);
				if(!checkedKey){
					this.checkedKeys.push(pkId);
				}
			}else {
				this.checkedKeys.splice(this.checkedKeys.findIndex(item => item==pkId),1);
			}
		},
	}
}
</script>

<style scoped>

</style>
